<template>
  <div class="header">
    <div class="header_cont pointer">
      <div class="logo" @click="returnHome">
        <img src="@/assets/img/logo.png" class="mr" />
        <img src="@/assets/img/header_line.png" class="mt" />
      </div>
      <div class="title">电力创新奖平台</div>
      <!--<div class="user_right pointer" v-if="page=='login'">
        <p :class="[$route.name=='shenbaoLogin'?'active':'']" @click="toLogin">
          <img src="@/assets/img/shouye.png" v-if="$route.name=='shenbaoLogin'"/>
          <img src="@/assets/img/home.png" v-else/>
          <span>首页</span>
        </p>
        <p :class="[$route.name=='Result'||$route.name=='Declare'?'active':'']" @click="toResult">
          <img src="@/assets/img/chengguo.png" v-if="$route.name=='Result'||$route.name=='Declare'"/>
          <img src="@/assets/img/ybcg.png" v-else/>
          <span>已报成果</span>
        </p>
        <p :class="[$route.name=='UserCenter'?'active':'']" @click="toUserCenter">
          <img src="@/assets/img/yonghuzhongxin.png" v-if="$route.name=='UserCenter'"/>
          <img src="@/assets/img/usercenter.png" v-else/>
          <span>用户中心</span>
        </p>
      </div>-->

      <div class="header_right pointer" @click="toLogin" v-if="page == 'register'">
        <span>已有账号，现在登录</span>
      </div>
    </div>
    <div class="top_menu" v-if="loginstatus == 'login'">
      <a-menu v-model="current" mode="horizontal">
        <a-menu-item>
          <a @click="toLogin">成果申报</a>
        </a-menu-item>
        <a-menu-item>
          <a @click="toResult()">已报成果</a>
        </a-menu-item>
        <a-menu-item>
          <a @click="toUserCenter()">用户中心</a>
        </a-menu-item>
      </a-menu>
    </div>
    <div class="top_menu" v-else>
      <div class="top_ul">
        <div class="top_li">
          <a href="https://www.cec.org.cn/" target="_blank">官网首页</a>
        </div>
        <div class="top_li" :class="$route.name == 'entrance' ? 'active' : ''">
          <a @click="toIndex">平台首页</a>
        </div>
        <div class="top_li" :class="$route.name == 'ArticleList' && $route.query.ind == '0' ? 'active' : ''">
          <a @click="alterTzgg()">通知公告</a>
        </div>
        <div class="top_li" :class="$route.name == 'ArticleList' && $route.query.ind == '1' ? 'active' : ''">
          <a @click="alterZlzx()">资料中心</a>
        </div>
        <!-- <div class="top_li" :class="$route.name=='awardWinningAchievements' && $route.query.ind=='2'?'active':''">
          <a @click="awardWinningAchievementsFn()">获奖成果查询</a>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { cxjsbPageList, sysCxjZlList, sysCxjZlDownload } from '@/api/shenbao'
export default {
  inject: ['reload'],
  data() {
    return {
      // current: ['ptsy'],
      current: 'ptsy',
      navInd: '',
      leftNav: [
        {
          title: '通知公告',
          id: 0,
        },
        {
          title: '资料中心',
          id: 1,
        },
      ],
      dataList: [],
      zlList: [],
      total: 0,
      loginstatus: '',
      key: '',
    }
  },
  props: ['page'],
  activated() {
    this.navInd = this.$route.query.ind
    this.getList()
    this.getZlList()
    var islogin = sessionStorage.getItem('islogin')
    if (islogin == '1') {
      this.loginstatus = 'login'
    } else {
      this.loginstatus = 'unlogin'
    }
  },
  methods: {
    handleClick(e) {
      // this.reload();
      // this.current = e.key;
      // console.log(this.current)
      // if (e.key == 'ptsy') {
      //     this.$router.push('/entrance')
      // } else if () {}
    },
    toResult() {
      this.$router.push('/shenbao/result')
    },
    toUserCenter() {
      this.$router.push('/shenbao/userCenter')
    },
    toLogin() {
      this.$router.push('/shenbao/login')
    },
    returnHome() {
      this.$router.push('/shenbao/login')
    },
    toIndex() {
      console.log(123123123)
      this.$router.push('/entrance')
      // this.current = ['ptsy'];
      this.current = 'ptsy'
      console.log(this.current)
      // this.$router.push('/shenbao/entrance')
      // this.current = 'ptsy'
      // this.current = ['ptsy']
    },
    alterTzgg() {
      this.$router.push('/shenbao/articleList?ind=0')
      this.reload()
    },
    alterZlzx() {
      this.$router.push('/shenbao/articleList?ind=1')
      this.reload()
    },
    awardWinningAchievementsFn() {
      this.$router.push('/shenbao/awardWinningAchievements?ind=2')
      this.reload()
    },
    handelChange(index) {
      this.navInd = index
    },
    // 获取申报列表
    getList() {
      let data = {
        pageNo: 1,
        pageSize: 10,
      }
      cxjsbPageList(data).then((res) => {
        if (res.data.success) {
          this.dataList = res.data.result.records
          this.total = res.data.result.total
        }
      })
    },
    // 跳转详情
    viewDetail(id) {
      this.$router.push({
        path: '/shenbao/innovationAwardNotice',
        query: {
          id,
        },
      })
    },
    // 获取资料中心列表
    getZlList() {
      let data = {
        pageNo: 1,
        pageSize: 10,
      }
      sysCxjZlList(data).then((res) => {
        if (res.data.success) {
          this.zlList = res.data.result.records
          this.total = res.data.result.total
        }
      })
    },
    downloadZl(url, zlMc) {
      let that = this
      let fileGs = url.split('.')
      sysCxjZlDownload(url).then((res) => {
        that.downfn(zlMc, res, fileGs[1])
      })
    },
    downfn(title, res, fileGs) {
      const data = res.data
      const url = window.URL.createObjectURL(
        new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
      )
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', title + '.' + fileGs)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
  },
  mounted() {
    // console.log(this.page)
  },
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 144px;
  position: relative;
  background-color: #ffffff;
  background-image: url('../../../assets/img/toparea.png');
  // margin-bottom: 40px;
}
.header_cont {
  width: 1400px;
  margin: 0 auto;
  position: relative;
  top: 15px;
  display: flex;
  overflow: hidden;
  .logo {
    display: flex;
    align-items: flex-start;
  }
  .mr {
    margin-right: 20px;
    height: 70px;
  }
  .mt {
  }
  .title {
    font-size: 30px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #0a4174;
    line-height: 50px;
    margin-left: 20px;
    padding-top: 10px;
    box-sizing: border-box;
    font-weight: 500;
  }
}
.header_right {
  position: absolute;
  right: 0;
  top: 20px;
  span {
    height: 30px;
    font-size: 22px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #ffffff;
    line-height: 30px;
  }
}
.user_right {
  position: absolute;
  right: 0;
  top: -25px;
  display: flex;
  p {
    width: 100px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &.active {
      background: #1462b3;
      span {
        color: #ffffff;
      }
    }
    img {
      width: 34px;
      height: 34px;
    }
    span {
      margin-top: 10px;
      font-size: 16px;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 500;
      color: #1462b3;
      line-height: 22px;
    }
  }
}
p {
  margin: 0;
}
.top_menu {
  background-image: url('../../../assets/img/bar.png');
  position: relative;
  display: flex;
  top: 26px;
  height: 48px;
  ul {
    width: 1200px;
    margin: 0 auto;
  }
  .ant-menu-horizontal {
    background-image: url('../../../assets/img/bar.png');
    border-bottom: none;
  }
  .ant-menu-horizontal > .ant-menu-item > a {
    color: #ffffff;
    font-size: 17px;
    letter-spacing: 2px;
    font-weight: 400;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-stretch: 100%;
    text-size-adjust: 100%;
  }
  .ant-menu-horizontal > .ant-menu-item:hover,
  .ant-menu-horizontal > .ant-menu-item-selected {
    background-image: url('../../../assets/img/select.png');
    border-bottom: none;
  }
  .ant-menu-item,
  .ant-menu-submenu-title {
    padding: 0px 43px;
  }
  .zdl-menu-bar-group-item:hover {
    background: url('../../../assets/img/select.png');
    background-size: 100% 100%;
  }
  .top_ul {
    width: 1200px;
    margin: 0 auto;
    .top_li {
      display: inline-block;
      padding: 0px 43px;
      position: relative;
      display: inline-block;
      border-bottom: 2px solid transparent;
      a {
        line-height: 48px;
        cursor: pointer;
        display: block;
        color: #ffffff;
        font-size: 17px;
        letter-spacing: 2px;
        font-weight: 400;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-stretch: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      &.active,
      &:hover {
        background-image: url('../../../assets/img/select.png');
        border-bottom: none;
      }
    }
  }
}
</style>
